import { useQuery } from "@tanstack/react-query";
import ky, { type Options } from "ky";

import type { Route } from "./+types/blogs";


import { AppWindowIcon, CodeIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"
import { RequestDataType } from "./blogs-request-data-type";
import { RequestHookTest } from "./blogs-request-hook-test";
import { useSearchParams } from "react-router";
export const meta: Route.MetaFunction = () => {
  return [{
    title: 'ky 测试用例',
    description: '我的博客使用到的案例',
  }]
}

export default function BlogsTestUnit() {
  const [searchParams,setSearchParams]=useSearchParams()
  const tab=searchParams.get('tab')||'request-data-type'
  return (
    <div className="flex w-full flex-col gap-6">
      <Tabs defaultValue={tab} onValueChange={(value)=>{
        setSearchParams({tab:value})
      }}>
        <TabsList>
          <TabsTrigger value="request-data-type">请求数据类型案例</TabsTrigger>
          <TabsTrigger value="hook-test">hook 测试</TabsTrigger>
        </TabsList>
        <TabsContent value="request-data-type">
          <Card>
            <CardHeader>
              <CardTitle>数据请求类型案例</CardTitle>
              <CardDescription>
                请求数据类型 包括 表单数据  json 字符串  urlencoded 等
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-6">
              <RequestDataType/>
            </CardContent>
           {/*  <CardFooter>
              <Button>Save changes</Button>
            </CardFooter> */}
          </Card>
        </TabsContent>
        <TabsContent value="hook-test">
          <Card>
            <CardHeader>
              <CardTitle>Password</CardTitle>
              <CardDescription>
                Change your password here. After saving, you&apos;ll be logged
                out.
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-6">
              <RequestHookTest/>
            </CardContent>
           {/*  <CardFooter>
              <Button>Save password</Button>
            </CardFooter> */}
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

